<template>
    <div id="sltUserList">
      <el-table
        v-loading="userLoading"
        size="medium"
        max-height="400px"
        :data="userListInSelect"
        @row-click="selectUserByClick"
        empty-text="请输入用户搜索"
      >
        <el-table-column
          property="userName"
          label="用户名"
          min-width="150"
        ></el-table-column>
        <el-table-column
          property="surname"
          label="姓氏"
          min-width="200"
        ></el-table-column>
        <el-table-column
          property="name"
          label="名称"
          min-width="200"
        ></el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="pageSizeList"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
  </template>
  <script lang="ts" setup>
  import { ref,reactive } from 'vue';  
  const PageSizeList = [10, 50, 100, 200, 500];

    let pageSizeList = PageSizeList;
    let pageSize = ref(20);
    let pageIndex = ref(1);
    let totalCount = ref(0);
    let userLoading = ref(false);
    let userForm = reactive({
      id: '',
      name: '',
      userName: '',
    });
    //绑定部门列表的数据
    let userListInSelect = reactive([]);
  
    //获取部门列表
    function findUserList() {
    //   userLoading.value = true;
    //   const url = '/api/identity/users/search';
    //   const data: any = {
    //     filter: userForm.name.trim(),
    //     sorting: '',
    //     skipCount: (pageIndex - 1) * pageSize,
    //     maxResultCount: pageSize,
    //   };
    //   this.axios.get(url, { params: data })
    //     .then((res: any) => {
    //       this.userListInSelect = res.items;
    //       this.totalCount = res.totalCount;
    //       this.userLoading = false;
    //     }).catch((err) => {
    //       this.userLoading = false;
    //       this.$alert(err.data.error.message, '提示');
    //     });
  
    }
  
    //装饰器中的参数是方法名，用来传递给父组件
    // @Emit('selectUserByClick')

    //点击选择的那一项部门
    function selectUserByClick(row:any) {
    //   this.userForm.id = row.id;
    //   this.userForm.name = row.name;
    //   this.userForm.userName = row.userName;
    }
    //按回车键选择部门列表的第一项
    function onEnterSelectUser() {
    //   if (this.userListInSelect && this.userListInSelect.length > 0) {
    //     this.selectUserByClick(this.userListInSelect[0]);
    //   }
    }
  
    //点击每页数量
    function handleSizeChange(val:any) {
      pageSize.value = val;
      pageIndex.value = 1;
      findUserList();
    }
  
    //点击跳转页码
    function handleCurrentChange(val:any) {
      pageIndex.value = val;
      findUserList();
    }
  
  
  </script>
  <style lang="scss" scoped>
  </style>